<template>
  <div class="yl-container">
    <div class="yl-main">
      <!-- table 列表组 -->
      <div class="yl-table-list">
        <el-table
          v-loading="loading"
          element-loading-text="玩命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          border
          :data="tableData"
        >
          <el-table-column align="center" label="序号" width="80">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="项目类型">
            <template slot-scope="{row}">
              <span v-if="row.nns_type == 1">行政</span>
              <span v-else-if="row.nns_type == 2">教学</span>
              <span v-else>通用</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="预算开始时间" prop="nns_start_time" show-overflow-tooltip></el-table-column>

          <el-table-column align="center" label="预算结束时间" prop="nns_end_time" show-overflow-tooltip></el-table-column>

          <el-table-column align="center" label="项目状态">
            <template slot-scope="{row}">
              <span v-if="row.nns_state == 1" class="success">开启</span>
              <span v-else class="info">关闭</span>
            </template>
          </el-table-column>

          <el-table-column align="center"  label="操作" fixed="right">
            <template slot-scope="scope">
              <YlButton uiType="main" icon="el-icon-view" v-show="scope.row.nns_can_write" @click="goAddCategory(scope.row.nns_can_write, scope.row.nns_id)">编辑</YlButton>
              <YlButton uiType="main" icon="el-icon-view" v-show="!scope.row.nns_can_write" @click="goAddCategory(scope.row.nns_can_write, scope.row.nns_id)">查看</YlButton>
            </template>
          </el-table-column>
          <div class="yl-table-empty" slot="empty">
            <img src="~@/assets/icons/svg/no-data.svg">
            <div>暂无数据</div>
          </div>
        </el-table>
        <!-- 分页模块 -->
        <YlPage :size="size" :page="page" :total="total" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      // table 列表数据
      tableData: [],
      // 分页
      page: 1,
      size: 10,
      total: 0
    }
  },
  created () {
    this.initTable()
  },
  methods: {
    // 列表初始化
    initTable () {
      this.loading = true
      this.initData()
    },

    // 数据初始化
    async initData () {
      let data = await this.$ylapi.getStageListExecuteStage({
        'page': this.page,
        'page_size': this.size
      })
      this.page = data.page
      this.total = data.total
      this.tableData = data.list
      this.loading = false
    },

    // 跳转
    goAddCategory (canWrite, id) {
      this.$router.push({
        path: `/executeStage/summaryManage/ShowContentList`,
        query: {
          id,
          canWrite
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
